<script setup lang="ts">

import HeadInfoIndex from "@/views/qq/home/home-top/HeadInfo/HeadInfoIndex.vue";
import PrivilegeIconIndex from "@/views/qq/home/home-top/PrivilegeIcon/privilegeIconIndex.vue";
import CurrencyTypesIndex from "@/views/qq/home/home-top/CurrencyTypes/CurrencyTypesIndex.vue";
import SystemSettingIndex from "@/views/qq/home/home-top/SystemSetting/SystemSettingIndex.vue";
import ShopRewardIndex from "@/views/qq/home/home-top/ShopReward/ShopRewardIndex.vue";
import LeftBanner from "@/views/qq/home/home-center/center-left/LeftBanner.vue";
import HomeCenterIndex from "@/views/qq/home/home-bottom/menu/HomeCenterIndex.vue";
import RightCompetition from "@/views/qq/home/home-center/center-right/RightCompetition.vue";
import ChatIndex from "@/views/qq/home/home-bottom/chat/ChatIndex.vue";
</script>

<template>
  <div class="home-page">
    <header class="top">
      <div class="left">
        <HeadInfoIndex/>
        <PrivilegeIconIndex/>
      </div>
      <div class="right">
        <div class="right-top">
          <CurrencyTypesIndex/>
          <SystemSettingIndex/>
        </div>
        <div class="right-bottom">
          <ShopRewardIndex/>
        </div>
      </div>
    </header>
    <main class="center">
      <LeftBanner class="center-left"/>
      <RightCompetition class="center-right"/>
    </main>
    <footer class="menu">
      <ChatIndex/>
      <HomeCenterIndex class="menu-last"/>
    </footer>
  </div>

</template>
<style scoped lang="scss">
.home-page {
  height: 100vh;
  margin: 0.8em 1em 0;

  .top {
    display: flex;
    margin-top: 0.4em;

    .left {
      display: flex;

      > * + * {
        margin-left: 2em;
      }
    }

    .right {
      display: flex;
      margin-left: auto;
      flex-direction: column;

      .right-top {
        display: flex;

        > * + * {
          margin-left: 2em;
        }
      }

      .right-bottom {
        margin-left: auto;
        margin-top: 1em;
      }
    }
  }

  .center {
    .center-left {

    }

    .center-right {
    }
  }

  .menu {
    display: flex;
    position: absolute;
    width: calc(100% + 2em);
    bottom: 0.8em;
    left: -1em;
    background-color: rgba(21, 55, 141, 0.3);

    .menu-last {
      margin-left: auto;
    }
  }
}
</style>
